<template>
    <div class="view-report-list" @click.stop="hiddenPopover('deletePopover')">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="选择模板">
                        <el-dropdown :hide-on-click="false" placement='bottom-start' trigger="click">
                            <el-input v-model="form.name"></el-input>
                            <el-dropdown-menu slot="dropdown">
                                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="9">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="使用状态">
                        <el-select v-model="form.forbid" placeholder="请选择" @change="forbidChange">
                            <el-option
                                    v-for="item in forbidData"
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" @click="addClick">新增</el-button>
            </el-col>
        </el-row>

        <el-table
                height="calc(100% - 57px)"
                :data="tableData"
                border>
            <el-table-column
                    prop="templateName"
                    label="模板名称">
            </el-table-column>
            <el-table-column
                    prop="templatePath"
                    label="模板路径">
            </el-table-column>
            <el-table-column
                    prop="templateType"
                    label="模板类型">
            </el-table-column>
            <el-table-column
                    label="使用状态">
                <template slot-scope="scope">
                    {{forbidMap[scope.row.forbid]}}
                </template>
            </el-table-column>
            <el-table-column
                    label="模板语言">
                <template slot-scope="scope">
                    {{templateLangMap[scope.row.templateLang]}}
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="{ row, $index }">
                    <el-button @click="handleClick(row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" style="color: #F56C6C;"
                               @click.stop="popover('deletePopover', { index: $index, data: row })">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-popover
                placement="top"
                width="100"
                trigger="click"
                ref="deletePopover"
        >
            <i class="el-icon-warning" style="margin-right: 5px; color: #E6A23C"></i>
            <span>该操作将会永久删除该数据，请确认！</span>
            <div style="text-align: right; margin: 0">
                <el-button type="text" size="mini" @click="deleteReport">确定</el-button>
            </div>
        </el-popover>
    </div>

</template>

<script>
    import configData from "./data";

    export default {
        name: "reportList",
        data() {
            return {
                form: {
                    name: "",
                    code: "",
                    forbid: ""
                },
                data: [
                    {
                        label: "一级 1",
                        children: [
                            {
                                label: "二级 1-1",
                                children: [
                                    {
                                        label: "三级 1-1-1"
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        label: "一级 2",
                        children: [
                            {
                                label: "二级 2-1",
                                children: [
                                    {
                                        label: "三级 2-1-1"
                                    }
                                ]
                            },
                            {
                                label: "二级 2-2",
                                children: [
                                    {
                                        label: "三级 2-2-1"
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        label: "一级 3",
                        children: [
                            {
                                label: "二级 3-1",
                                children: [
                                    {
                                        label: "三级 3-1-1"
                                    }
                                ]
                            },
                            {
                                label: "二级 3-2",
                                children: [
                                    {
                                        label: "三级 3-2-1"
                                    }
                                ]
                            }
                        ]
                    }
                ],
                defaultProps: {
                    children: "childList",
                    label: "name",
                },
                tableData: [],
                forbidData: [],
                forbidMap: {},
                templateLangMap: {},

                deletePopover: {},
                deleteItem: {}
            };
        },
        methods: {
            deleteReport() {
                this.$api.request({
                    path: 'report/list/del',
                    data: {
                        id: this.deleteItem.data.id
                    }
                })
                    .then(() => {
                        this.$message.success('删除成功');
                        this.tableData.splice(this.deleteItem.index, 1);
                        this.hiddenPopover();
                    })
            },
            /**
             * @param popoverName
             */
            popover(popoverName = 'deletePopover', data) {
                const popover = this.$refs[popoverName];
                if (!popover) return;
                let current = event.currentTarget;
                popover.popperJS = void 0;
                this.deletePopover = popover.referenceElm = current;
                popover.doShow();
                popover.updatePopper();
                this.deleteItem = data;
            },
            /**
             * @param {String} popoverName
             */
            hiddenPopover(popoverName = 'deletePopover') {
                if (event.currentTarget === this.deletePopover) return;
                this.$refs[popoverName].doClose();
                this.deletePopover = {};
                this.deleteItem = {};
            },
            addClick() {
                this.$router.push({name: "reportDetail", params: {type: 'add'}});
            },
            //编辑编辑按钮
            handleClick(row) {
                this.$router.push({name: "reportDetail", params: row});
            },
            //点击树节点
            handleNodeClick(data) {
                if (data.code) {
                    this.form.name = data.name;
                    this.form.code = data.code;
                    this.requestTable();
                }
            },
            forbidChange(val) {
                this.form.forbid = val;
                this.requestTable();
            },
            requestTable() {
                this.$api
                    .request({
                        path: "report/list/pageList",
                        method: "POST",
                        data: {
                            reportCategoryCode: this.form.code,
                            forbid: this.form.forbid
                        }
                    })
                    .then(({data}) => {
                        this.tableData = data;
                    })
                    .catch(() => {
                    });
            },
            requestTree() {
                this.$api
                    .request({
                        path: "report/list/allCategory",
                        method: "POST"
                    })
                    .then(({data}) => {
                        this.data = data;
                    })
                    .catch(() => {
                    });
            }
        },
        created() {
            this.forbidMap = configData.forbidMap;
            this.templateLangMap = configData.templateLangMap;
            this.forbidData = configData.forbidEnum.map(item => {
                return {
                    text: item.name,
                    value: item.code
                }
            });

            this.requestTree();
            this.requestTable();
        },
        mounted() {
        }
    };
</script>

<style lang="scss" scoped>
    .view-report-list {
        width: 100%;
    }
</style>
